<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>#div{width:200px;height:200px;background-color: red; color:#fff;position: absolute;cursor:pointer;}
    </style>
<script>
//<!--拖拽涉及几个操作动作  鼠标按下  鼠标抬起  鼠标移动-->
/*鼠标拖拽原理*/

window.onload=function(){
   var oDiv=document.getElementById('div');
   var disX=0;
   var disY=0;
   oDiv.onmousedown=function(ev){//鼠标按下
         var oEvent=ev||event;
         disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
         disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标

       if(oDiv.releaseCapture){
           //只在IE下兼容，在这个条件下，执行下面的代码

           oDiv.onmouseover=function(ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
               var oEvent=ev||event;
               var l=oEvent.clientX-disX;
               var t=oEvent.clientY-disY;

               oDiv.style.left=l+'px';
               oDiv.style.top=t+'px';
           };
           oDiv.onmouseup=function(){//鼠标抬起，就需要把前面的事件解除
               oDiv.onmouseover=null;
               oDiv.onmouseup=null;
               oDiv.releaseCapture();//解除事件捕获，
           };
           oDiv.setCapture();//事件捕获，将所有事件都集中在一个div上
       }
       else{
           //Chrome、FF
           document.onmouseover=function(ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
               var oEvent=ev||event;
               var l=oEvent.clientX-disX;
               var t=oEvent.clientY-disY;

               oDiv.style.left=l+'px';
               oDiv.style.top=t+'px';
           };
           document.onmouseup=function(){//鼠标抬起，就需要把前面的事件解除
               document.onmouseover=null;
               document.onmouseup=null;
               oDiv.releaseCapture();//解除事件捕获，
           };
           return false;// 可以解决Chrome FF IE9,有文字的情况下，但是不能解决IE6-8             解决FF空div出现的bug，通过阻止默认事件
       }


   };
};

</script>
</head>
<body>
鼠标拖拽原理
    <div id="div">
        当鼠标按下就与方块之间有个距离，在一直拖拽过程中，这个距离不变<br>
        第一步:求鼠标与方块之间的距离, 等于=当前鼠标位置-物体位置<br>
        第二步：根据鼠标位置，计算出物体位置，等于=当前鼠标位置-鼠标与方块之间距离<br>
    </div>
</body>
</html>